<template>
  <div>
    <base-page ref="basePage" :basepage="basePage"></base-page>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
export default {
  name: "RouterManage",
  components: {
    "base-page": BasePage,
  },
  data() {
    return {
      basePage: {
        // URL
        url: "menuOperation",
        // 查询条件
        searchConf: [
          [
            {
              title: "菜单类型",
              type: "select",
              prop: "type",
              data: [
                {
                  value: "0",
                  label: "父菜单",
                },
                {
                  value: "1",
                  label: "菜单",
                },
              ],
            },
            {
              title: "名称",
              type: "input",
              prop: "name",
            },
            {
              title: "路径",
              type: "input",
              prop: "path",
            },
            {
              title: "父级菜单",
              type: "select",
              prop: "parentId",
              data: [],
            },
          ],
        ],
        buttonConf: {
          insertShow: true,
          deleteShow: true,
        },
        // table列
        tableColumnConf: {
          columns: [
            { prop: "name", label: "名称" },
            { prop: "type", label: "菜单类型" },
            { prop: "path", label: "路径" },
            { prop: "parentName", label: "父级菜单" },
            { prop: "showIndex", label: "显示顺序" },
            { prop: "createName", label: "创建人" },
            { prop: "createTime", label: "创建时间" },
            { prop: "available", label: "是否有效" },
          ],
          operation: {
            state: true,
            defs: [],
          },
        },
        detailConf: {
          title: "用户信息",
          data: [],
        },
        // 新增修改form表单设置
        formConf: {
          formData: {
            path: "",
            name: "",
            showIndex: "",
            parentId: "",
            available: "",
          },
          width: "50%",
          title: "菜单",
          data: [
            {
              title: "菜单类型",
              type: "select",
              prop: "type",
              data: [
                {
                  value: "0",
                  label: "父菜单",
                },
                {
                  value: "1",
                  label: "菜单",
                },
              ],
            },
            {
              title: "path",
              type: "input",
              prop: "path",
              show: false,
            },
            {
              title: "名称",
              type: "input",
              prop: "name",
            },
            {
              title: "显示顺序",
              type: "input",
              prop: "showIndex",
            },
            {
              title: "父级菜单",
              type: "select",
              prop: "parentId",
              data: [],
            },
            {
              title: "是否有效",
              type: "select",
              prop: "available",
              data: [
                { value: "1", label: "有效" },
                { value: "0", label: "无效" },
              ],
            },
          ],
          rules: {
            name: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("名称不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
            showIndex: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("顺序不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
            available: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
          },
        },
      },
    };
  },
  methods: {
    getParents() {
      this.COMMON.httpPost(
        this,
        "menuOperation/selectList",
        { type: "0" },
        (result) => {
          if (result.result === "SUCCESS") {
            var data = new Array();
            if (result.list != undefined && result.list.length != 0) {
              result.list.forEach((element) => {
                var item = {};
                item["value"] = element.id;
                item["label"] = element.name;
                data.push(item);
              });
            }
            var item = {};
            item["value"] = "";
            item["label"] = "主菜单";
            data.push(item);
            this.basePage.formConf.data[4]["data"] = data;
            this.basePage.searchConf[0][3]["data"] = data;
          }
        },
        (result) => {}
      );
    },
    event(event, data) {
      switch (event) {
        case "insert-success": {
          this.getParents();
        }
        case "alter": {
          if (data.type === "0") {
            this.basePage.formConf.data[1]["show"] = false;
          } else {
            this.basePage.formConf.data[1]["show"] = true;
          }
        }
      }
    },
    selectChange(type, pro, value) {
      debugger;
      if (pro === "type") {
        if (value === "1") {
          this.basePage.formConf.data[1]["show"] = true;
        } else {
          this.basePage.formConf.data[1]["show"] = false;
        }
      }
    },
    formatter(data, prop, index) {
      switch (prop) {
        case "available": {
          if (data == "1") {
            return "有效";
          } else {
            return "无效";
          }
        }
        case "type": {
          if (data == "0") {
            return "父菜单";
          } else {
            return "菜单";
          }
        }
        default: {
          return data;
        }
      }
    },
  },
  created: function () {
    this.getParents();
  },
};
</script>
<style>
</style>